<!DOCTYPE html>
<html>
<head lang="zh-CN">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>房源信息</title>
    <link rel="stylesheet" href="../css/bootstrap.css"/>
    <style>
        body {
            padding-top: 50px;
            background-color: #f5f5f5;
        }
        #top-head {
            /*border: 1px solid #222;*/
        }

        #search-content {
            /*border: 1px solid #222;*/
        }

        #related-content {
            /*border: 1px solid #222;*/
        }

        #data-table {
            /*border: 1px solid #222;*/
        }
    </style>
</head>
<body>
<div class="container">

    <div class="row">
        <div class="col-md-12" id="top-head">
            <nav class="navbar navbar-inverse navbar-fixed-top">
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="container">
                    <div class="row">
                        <div class="col-md-10 col-lg-offset-1">
                            <ul class="nav navbar-nav">
                                <li><a href="#">城市管理</a></li>
                                <li><a href="#">房产管理</a></li>
                                <li><a href="#">建筑行业</a></li>
                                <li><a href="#">城建档案</a></li>
                                <li><a href="#">建筑科技</a></li>
                                <li><a href="#">美丽乡村</a></li>
                                <li><a href="#">阳光征收</a></li>
                                <li><a href="#">住房保障</a></li>
                                <li><a href="#">物业管理</a></li>
                                <li><a href="#">关于我们</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- /.navbar-collapse -->
            </nav>
        </div>
    </div>

    <div class="row-fluid">
        <div class="span12">
            <ul class="breadcrumb">
                <li>
                    <a href="../index.html">首 页</a> <span class="divider"></span>
                </li>
                <li>
                    <a href="#">房产管理</a> <span class="divider"></span>
                </li>
                <li class="active">
                    房源信息
                </li>
            </ul>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12" id="search-content">

            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">搜索条</h3>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-12">

                            <form action="" class="form-inline">
                                <div class="input-group">
                  <span class="input-group-btn">
                    <button class="btn btn-default" type="button">
                        小区名称：
                    </button>
                  </span>
                                    <input type="text" class="form-control" placeholder="小区名称">
                                </div>
                                <!-- /input-group -->

                                <div class="input-group">
                  <span class="input-group-btn">
                    <button class="btn btn-default" type="button">
                        楼号：
                    </button>
                  </span>
                                    <input type="text" class="form-control" placeholder="楼号">
                                </div>
                                <!-- /input-group -->

                                <div class="input-group">
                  <span class="input-group-btn">
                    <button class="btn btn-default" type="button">
                        房屋面积：
                    </button>
                  </span>
                                    <input type="text" class="form-control" placeholder="房屋面积">
                                </div>
                                <!-- /input-group -->

                                <div class="input-group">
                  <span class="input-group-btn">
                    <button class="btn btn-default" type="button">
                        毛坯单价：
                    </button>
                  </span>
                                    <input type="text" class="form-control" placeholder="毛坯单价">
                                </div>
                                <!-- /input-group -->
                            </form>
                        </div>
                        <!--col-->
                    </div>
                    <!--row-->
                    <div class="row">
                        <div class="col-md-12" style="margin-top:5px;">

                            <form action="" class="form-inline">
                                <div class="input-group">
                  <span class="input-group-btn">
                    <button class="btn btn-default" type="button">
                        小区名称：
                    </button>
                  </span>
                                    <input type="text" class="form-control" placeholder="小区名称">
                                </div>
                                <!-- /input-group -->

                                <div class="input-group">
                  <span class="input-group-btn">
                    <button class="btn btn-default" type="button">
                        楼号：
                    </button>
                  </span>
                                    <input type="text" class="form-control" placeholder="楼号">
                                </div>
                                <!-- /input-group -->

                                <div class="input-group">
                  <span class="input-group-btn">
                    <button class="btn btn-default" type="button">
                        房屋面积：
                    </button>
                  </span>
                                    <input type="text" class="form-control" placeholder="房屋面积">
                                </div>
                                <!-- /input-group -->

                                <div class="input-group">
                  <span class="input-group-btn">
                    <button class="btn btn-default" type="button">
                        毛坯单价：
                    </button>
                  </span>
                                    <input type="text" class="form-control" placeholder="毛坯单价">
                                </div>
                                <!-- /input-group -->
                            </form>
                        </div>
                        <!--col-->
                    </div>
                    <!--row-->
                    <div class="row">
                        <div class="col-md-2 col-md-offset-8 pull-right" style="margin-top:15px;">
                            <button class="btn btn-primary">开始搜索</button>
                            <span class=" glyphicon glyphicon-chevron-down">更多搜索</span>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!--企业名称、项目名称、施工幢号、标准地名幢号、所在层、楼号、单元号、放好、房屋面积、建筑面积、套内面积、
    分摊面积、规划批建用途、测绘用途、预售房屋用途、房屋性质、批准可售状态、毛坯单价（元/m²）、装修单价（元/m²）、
    销售状态、抵押状态、查封状态、冻结状态、测绘变更关系、起始层-->
    <div class="row">
        <div class="col-md-12" id="related-content">
            <div class="row">
                <div class="col-md-3">
                    <div class="panel panel-default">
                        <!-- Default panel contents -->
                        <div class="panel-heading">房产开发项目关联</div>
                        <div class="panel-body">
                            <p>以下的房屋列表信息可能跟如下项目有关联...</p>
                        </div>

                        <!-- List group -->
                        <ul class="list-group">
                            <li class="list-group-item">
                                <span class="badge">14</span>
                                <a href="#">湖州市XXX项目</a>
                            </li>
                            <li class="list-group-item"><span class="badge">155</span><a href="#">湖州市XXX项目</a></li>
                            <li class="list-group-item"><span class="badge">20</span><a href="#">湖州市XXX项目</a></li>
                            <li class="list-group-item"><span class="badge">9</span><a href="#">湖州市XXX项目</a></li>
                            <li class="list-group-item"><span class="badge">1</span><a href="#">湖州市XXX项目</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="panel panel-default">
                        <!-- Default panel contents -->
                        <div class="panel-heading">房产开发企业关联</div>
                        <div class="panel-body">
                            <p>以下的房屋列表信息可能有如下企业参与建设...</p>
                        </div>

                        <!-- List group -->
                        <ul class="list-group">
                            <li class="list-group-item"><a href="#">湖州市XXX房产开发公司</a></li>
                            <li class="list-group-item"><a href="#">湖州市XXX房产开发公司</a></li>
                            <li class="list-group-item"><a href="#">湖州市XXX房产开发公司</a></li>
                            <li class="list-group-item"><a href="#">湖州市XXX房产开发公司</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="panel panel-default">
                        <!-- Default panel contents -->
                        <div class="panel-heading">所在区域的公共设施</div>
                        <div class="panel-body">
                            <p>根据房屋所在区域，可能与以下公共设置相关...</p>
                        </div>

                        <!-- List group -->
                        <ul class="list-group">
                            <li class="list-group-item"><a href="#">日用水量情况</a></li>
                            <li class="list-group-item"><a href="#">垃圾情况</a></li>
                            <li class="list-group-item"><a href="#">路灯情况</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="panel panel-default">
                        <!-- Default panel contents -->
                        <div class="panel-heading">周边情况</div>
                        <div class="panel-body">
                            <p>根据房屋所在区域，周边可能具有的情况...</p>
                        </div>

                        <!-- List group -->
                        <ul class="list-group">
                            <li class="list-group-item"><span class="badge">26</span><a href="#">附近房源</a></li>
                            <li class="list-group-item"><span class="badge">1</span><a href="#">附近项目</a></li>
                            <li class="list-group-item"><span class="badge">328</span><a href="#">附近公共设置</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <form action="" class="form-inline">
                <div class="btn-toolbar" role="toolbar" aria-label="...">
                    <div class="btn-group" role="group" aria-label="...">
                        <button type="button" class="btn btn-default">
                            <span class="glyphicon glyphicon-refresh"></span>
                        </button>
                        <button type="button" class="btn btn-default">
                            <span class="glyphicon glyphicon-cog"></span>
                        </button>

                        <div class="btn-group" role="group">
                            <div class="dropdown">
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                        aria-haspopup="true" aria-expanded="false">
                                    湖州市房产管理中心
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Dropdown link</a></li>
                                    <li><a href="#">Dropdown link</a></li>
                                </ul>
                            </div>

                        </div>

                    </div>
                    <div class="btn-group" role="group" aria-label="...">
                        <button type="button" class="btn btn-default">导入EXCEL</button>
                        <button type="button" class="btn btn-default">导出EXCEL</button>
                        <button type="button" class="btn btn-default">
                            <span class="glyphicon glyphicon-print"></span>
                        </button>
                    </div>
                    <div class="input-group">
                  <span class="input-group-btn">
                    <button class="btn btn-default" type="button">
                        <span class="glyphicon glyphicon-search"></span>
                    </button>
                  </span>
                        <input type="text" class="form-control" placeholder="关键字搜索...">
                    </div>
                    <!-- /input-group -->
                    <div class="btn-group" role="group">
                        <div class="dropdown">
                            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                房源类型
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                <li><a href="#">房改房</a></li>
                                <li><a href="#">经济适用房</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </form>
        </div>

    </div>
    <div class="row">
        <div class="col-md-12" id="data-table">
            <table class="table table-bordered table-condensed table-hover" style="text-align:center;">
                <thead>
                <tr style="background-color:#ccc;">
                    <td>编号</td>
                    <td>房屋所属</td>
                    <td>房屋类型</td>
                    <td>房屋坐落</td>
                    <td>小区</td>
                    <td>建筑面积</td>
                    <td>产权人</td>
                    <td>标准售价</td>
                </tr>
                </thead>
                <tbody id="houses_data_list">

                </tbody>
            </table>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12" style="text-align: center;">
            <nav>
                <ul class="pagination">
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
            </div>
        </div>
    </div>

</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../js/common/bootstrap.js"></script>
<script src="../js/data/house_data.js"></script>
<script src="../js/data/house.js"></script>
</body>
</html>